import axios from "axios"
import React, { useEffect, useState } from "react"
import { useNavigate, Outlet } from 'react-router-dom'
import './css/shopcart.css'
import { LeftOutline, CloseCircleOutline, RightOutline, MoreOutline } from 'antd-mobile-icons'
import { ImageUploader, Space, Card, Radio } from 'antd-mobile';
import { Stepper } from 'tdesign-mobile-react';

let Shopcart = () => {
    let navigate = useNavigate()
    const [flag, setFlag] = useState(false)
    const [sum, setSum] = useState(1)
    return (
        <div className="shopcart_div">
            <div className="shopcart_top_div">
                <div>
                    {
                        !flag ?
                            <span style={{ fontSize: '1.6rem' }} onClick={() => setFlag(true)}>编辑</span>
                            :
                            <span style={{ fontSize: '1.6rem' }} onClick={() => setFlag(false)}>完成</span>
                    }
                    <span>购物车</span>
                </div>
            </div>
            < div className="shopcart_content_div">
                <div className="shopcart_address_div">
                    <div className="shopcart_address_div1">
                        <p>河北省石家庄市高新区1000号大楼10层</p>
                        <span>
                            朱先生
                            158****1745
                        </span>
                    </div>
                    <RightOutline onClick={() => navigate('/address')} />
                </div>

                <div className="shopcart_shopping_div">
                    <div className="shopcart_shopping_div1">
                        <Radio />
                    </div>
                    <div className="shopcart_shopping_div2">
                        <img src="../../img/9.jpg" alt="" />
                        <div className="shopcart_shopping_div2_div1">
                            <p>纯天然大苹果来自大自然的天然产物</p>
                            <div className="shopcart_shopping_div2_div2">
                                <p style={{ color: 'red' }}>￥60.00</p>
                                <Stepper theme="filled" defaultValue={1}></Stepper>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="shopcart_shopping_div">
                    <div className="shopcart_shopping_div1">
                        <Radio />
                    </div>
                    <div className="shopcart_shopping_div2">
                        <img src="../../img/9.jpg" alt="" />
                        <div className="shopcart_shopping_div2_div1">
                            <p>纯天然大苹果来自大自然的天然产物</p>
                            <div className="shopcart_shopping_div2_div2">
                                <p style={{ color: 'red' }}>￥60.00</p>
                                <Stepper theme="filled" defaultValue={1}></Stepper>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div className="shopcart_end_div">
                <div className="shopcart_end_div_div1">
                    <Radio />
                    &nbsp;&nbsp;&nbsp;
                    <p>全选</p>
                </div>
                {
                    !flag ?
                        <div className="shopcart_sum_div">
                            <span>
                                合计：￥60.00
                            </span>
                            {
                                sum == 0 ?
                                    <button className="shopcart_sum_div_btn1">结算(0)</button>
                                    :
                                    <button className="shopcart_sum_div_btn2">结算(1)</button>
                            }
                        </div> :
                        <div className="shopcart_sum_div1">
                            <button disabled>移除</button>
                        </div>
                }
            </div>
        </div>
    )
}

export default Shopcart